<template>

  <el-dialog title="待办查询" style="width: 1200px;">
    <!-- 搜索框 -->
    <el-form :model="form" ref="ruleFormRef">
      <el-form-item label="主题" prop="theme">
        <el-input v-model="form.theme" autocomplete="off" placeholder="输入主题" />
      </el-form-item>


      <div style="left:600px;top: -50px;">
        <el-form-item label="时间" style="width: 400px;">
          <el-date-picker v-model="form.date" @change="onOk" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
      </div>

      <div style="top: -40px;">
        <el-form-item label="内容" prop="content">
          <el-input v-model="form.content" autocomplete="off" placeholder="输入内容" />
        </el-form-item>
      </div>

      <div style="top: -30px;">
        <el-form-item label="地点" prop="address">
          <el-input v-model="form.address" autocomplete="off" placeholder="输入地点" />
        </el-form-item>
      </div>
      <div style="left: 600px;top: -140px;">
        <el-form-item label="搭档" prop="partner">
          <el-input v-model="form.partner" autocomplete="off" placeholder="合作伙伴" />
        </el-form-item>
      </div>

      <div style="left: 600px;top: -130px;">
        <el-form-item label="类别" prop="type">
          <el-select v-model="form.type" placeholder="选择类别">
            <el-option label="不选" value="" />
            <el-option label="生活" value="生活" />
            <el-option label="娱乐" value="娱乐" />
            <el-option label="工作" value="工作" />
            <el-option label="学习" value="学习" />
          </el-select>
        </el-form-item>
      </div>

      <div style="top: -120px;">
        <el-form-item label="完成" prop="status">
          <el-select v-model="form.status" placeholder="选择是否完成">
            <el-option label="不选" value="" />
            <el-option label="完成" value="1" />
            <el-option label="未完成" value="0" />
          </el-select>
        </el-form-item>
      </div>

      <div style="top: -170px;left: 720px;">
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </div>
    </el-form>

    <!-- 搜索出来的东西 -->
    <div style="top: -150px;">
      <div>
        <!-- user.todaylist  直接使用 不要再重新定义 否则先我一步 -->
        <el-table :data="user.searchlist" style="width: 1100px">
          <el-table-column fixed prop="startDate" label="时间" width="200" />
          <el-table-column prop="theme" label="主题" width="150" />
          <el-table-column prop="content" label="内容" width="200" />
          <el-table-column prop="address" label="地点" width="100" />
          <el-table-column prop="partner" label="搭档" width="100" />
          <el-table-column prop="type" label="类别" width="100" />
          <el-table-column prop="status" label="完成" width="100">
            <!-- 状态改变 -->
            <template #default="scope">
              <el-switch v-model="scope.row.status" inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1"
                :inactive-value="0" active-text="是" inactive-text="否" @click="change(scope.row.id, scope.row.status)" />
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button link type="primary" size="small"
                @click="edit(scope.row.id, scope.row.startDate.substring(0, 10))">编辑</el-button>
              <el-button link type="primary" size="small"
                @click="del(scope.row.id, scope.row.startDate.substring(0, 10))">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>


  </el-dialog>


</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { FormInstance, ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton } from 'element-plus';
import userCount from '../../stores/userCount.js'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const form = reactive({
  theme: '',
  content: '',
  address: '',
  type: '',
  partner: '',
  status: '',
  date: ['', '']
})

let form2 = reactive({
  theme: '',
  content: '',
  address: '',
  section: '',
  date: ['', ''],
  time: '',
  radio: ''
});


const user = userCount()

/* 修改页面是否可见 */
let visible = ref(false)

/* 搜索功能 */

const search = () => {
  axios.post('http://localhost:8080/content/todo/64').then(resp => {
    user.searchlist = resp.data
  })
  console.log(form);
}

/* 删除操作 */
const del = (id, day) => {
  ElMessageBox.confirm(
    '确定删除吗?',
    '消息',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      /* 删除请求 */
      axios.post('http://localhost:8080/content/deleteTodo',
        { "id": id, "userId": user.userid }).
        then(resp => {
          /* 再查当天  让试图即时更新*/
          axios.post('http://localhost:8080/content/findTodayList',
            { "userId": user.userid, "startDate": day }).then(resp => {
              user.todaylist = resp.data
            })
          user.todolist = resp.data
        })

      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const todoid = ref('')
/* 打开修改页面 */
const edit = (id, day) => {
  todoid.value = id
  console.log(todoid.value);
  axios.get('http://localhost:8080/content/findById/' + id).then(resp => {
    user.searchlist = resp.data
    console.log(user.searchlist);
    /* 数据回显 */
    form2.theme = user.searchlist.theme
    form2.content = user.searchlist.content
    form2.address = user.searchlist.address
    form2.section = user.searchlist.partner
    form2.date[0] = user.searchlist.startDate
    form2.date[1] = user.searchlist.endDate
    form2.radio = user.searchlist.type
  })
  visible.value = true
  console.log('edit')
  console.log(id)
}




const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

/* const gridData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-03',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
] */
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>